<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>检索算法的实现</title>
    <link rel="stylesheet" href="./style/index.css" />
    <link rel="stylesheet" href="./style/download/iconfont.css" />
    <script src="./fun/node_modules/echarts/dist/echarts.min.js"></script>
    <script defer src="./fun/fun.js"></script>
</head>

<body>
    <header>
        <div>
            <span></span>
            <span></span>
        </div>
        <div>
            <span></span>
            <p>检索算法的实现</p>
            <span></span>
        </div>
        <span></span>
        <img src="./images/项链.png" alt="" />
    </header>
    <main>
        <section class="left-aside">
            <div id="first-echart"></div>
            <div id="second-echart"></div>
        </section>
        <section class="center-content">
            <ul class="top-content">
                <li>
                    <i class="iconfont icon-faxian"></i>
                    <div>
                        <span>111</span>
                        <p>顺序查找</p>
                    </div>
                </li>
                <li>
                    <i class="iconfont icon-paizhao"></i>
                    <div>
                        <span>11</span>
                        <p>二分查找</p>
                    </div>
                </li>
                <li>
                    <i class="iconfont icon-huodong"></i>
                    <div>
                        <span>111</span>
                        <p>三分查找</p>
                    </div>
                </li>
                <li>
                    <i class="iconfont icon-rili"></i>
                    <div>
                        <span>111</span>
                        <p>插值查找</p>
                    </div>
                </li>
            </ul>
            <div class="bottom-content">
                <img src="./images/center背景.png" alt="" />
                <img class="nuclear" src="./images/center.png" alt="" />
                <div class="small-cir">
                    <img class="energy1" src="./images/能量球.png" alt="" />
                    <img class="energy2" src="./images/能量球.png" alt="" />
                </div>
                <div class="big-cir">
                    <img class="energy3" src="./images/能量球.png" alt="" />
                </div>
            </div>
        </section>
        <section class="right-aside">
            <div id="third-echart"></div>
            <div id="forth-echart">
                <ul>
                    <li class="random-value">
                        <input type="text" />
                        <button>生成随机数组</button>
                    </li>
                    <li class="find-out">
                        <label for="find_value">请输入查找元素：</label>
                        <input type="text" id="find_value" />
                        <button>提交</button>
                        <span class="find-result"></span>
                    </li>
                    <li class="pro-echart3">
                        <input type="text" />
                        <button>生成图三</button>
                        <span></span>
                    </li>
                    <li class="list-array">
                        <i>输入先升后降（或先降后升）数组</i>
                        <div class="print-array">
                            <label for="pro-value">输入数组：</label>
                            <input type="text" id="pro-value" />
                        </div>
                        <div class="print-value">
                            <div>
                                <span>最大</span>
                                <p>10</p>
                                <span>比较</span>
                                <p>10</p>
                                <span>最小</span>
                                <p>10</p>
                                <span>比较</span>
                                <p>10</p>
                            </div>
                            <div>
                                <span>最大</span>
                                <p>10</p>
                                <span>比较</span>
                                <p>10</p>
                                <span>最小</span>
                                <p>10</p>
                                <span>比较</span>
                                <p>10</p>
                            </div>
                        </div>
                    </li>
                    <li class="min-k">
                        <div>
                            <label for="key"> 输入K值： </label>
                            <input type="text" id="key" />
                            <button>提交</button>
                        </div>
                        <div>
                            <span>蛮力法：</span>
                            <p>10</p>
                            <span>预排序：</span>
                            <p>20</p>
                            <span>减可变规模：</span>
                            <p>30</p>
                        </div>
                    </li>
                </ul>
            </div>
        </section>
    </main>
</body>

</html>